import React from 'react'
import { Typography, Card, Table, Button, Progress, Tag } from 'antd'
import { SyncOutlined, DownloadOutlined, BarChartOutlined } from '@ant-design/icons'

const { Title, Paragraph } = Typography

/**
 * 数据采集页面组件
 * 多平台数据爬取和分析系统
 */
const DataCollectionPage: React.FC = () => {
  // 模拟热点数据
  const mockHotTopics = [
    { key: '1', platform: '微博', topic: '春节档电影票房', heat: 95, trend: 'up' },
    { key: '2', platform: '抖音', topic: '龙年新春祝福', heat: 88, trend: 'up' },
    { key: '3', platform: '小红书', topic: '年夜饭制作', heat: 76, trend: 'stable' },
    { key: '4', platform: '知乎', topic: '2025年职业规划', heat: 65, trend: 'down' },
  ]

  const columns = [
    {
      title: '平台',
      dataIndex: 'platform',
      key: 'platform',
      render: (text: string) => <Tag color="blue">{text}</Tag>,
    },
    {
      title: '热点话题',
      dataIndex: 'topic',
      key: 'topic',
    },
    {
      title: '热度',
      dataIndex: 'heat',
      key: 'heat',
      render: (value: number) => <Progress percent={value} size="small" />,
    },
    {
      title: '趋势',
      dataIndex: 'trend',
      key: 'trend',
      render: (trend: string) => {
        const colors = { up: 'red', stable: 'blue', down: 'gray' }
        const texts = { up: '上升', stable: '稳定', down: '下降' }
        return <Tag color={colors[trend as keyof typeof colors]}>{texts[trend as keyof typeof texts]}</Tag>
      },
    },
  ]

  return (
    <div style={{ padding: '24px' }}>
      <div style={{ marginBottom: '24px' }}>
        <Title level={2}>数据采集系统</Title>
        <Paragraph type="secondary">
          多平台热点监控和作品数据分析，为内容创作提供数据洞察
        </Paragraph>
      </div>
      
      <div style={{ display: 'flex', gap: '16px', marginBottom: '24px' }}>
        <Button type="primary" icon={<SyncOutlined />}>
          开始采集
        </Button>
        <Button icon={<BarChartOutlined />}>
          数据分析
        </Button>
        <Button icon={<DownloadOutlined />}>
          导出报告
        </Button>
      </div>
      
      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: '16px', marginBottom: '24px' }}>
        <Card title="实时热点监控" variant="borderless">
          <Table 
            dataSource={mockHotTopics}
            columns={columns}
            pagination={false}
            size="small"
          />
        </Card>
        
        <Card title="采集统计" variant="borderless">
          <div style={{ marginBottom: '16px' }}>
            <p>今日采集：<strong>2,486</strong> 条</p>
            <Progress percent={78} size="small" />
          </div>
          <div style={{ marginBottom: '16px' }}>
            <p>活跃平台：<strong>8</strong> 个</p>
            <Progress percent={100} size="small" />
          </div>
          <div>
            <p>数据质量：<strong>良好</strong></p>
            <Progress percent={85} size="small" status="active" />
          </div>
        </Card>
      </div>
      
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '16px' }}>
        <Card title="平台监控" variant="borderless">
          <p>微博、抖音、小红书、知乎等8个平台</p>
          <p style={{ color: '#666', fontSize: '14px' }}>第三阶段开发功能</p>
        </Card>
        
        <Card title="作品追踪" variant="borderless">
          <p>自有作品数据监控和竞品分析</p>
          <p style={{ color: '#666', fontSize: '14px' }}>第三阶段开发功能</p>
        </Card>
        
        <Card title="智能分析" variant="borderless">
          <p>热点趋势预测和创作建议</p>
          <p style={{ color: '#666', fontSize: '14px' }}>第三阶段开发功能</p>
        </Card>
        
        <Card title="数据导出" variant="borderless">
          <p>多格式数据报告和API接口</p>
          <p style={{ color: '#666', fontSize: '14px' }}>第三阶段开发功能</p>
        </Card>
      </div>
    </div>
  )
}

export default DataCollectionPage